// 立项
<template>
  <div class="box">
    <el-card>
      <el-form class="searchForm" :inline="true" :model="queryForm" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="queryForm.time"
                unlink-panels
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 250px; background-color: transparent"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input v-model="queryForm.name" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源">
              <el-select v-model="queryForm.source" clearable placeholder="请选择来源">
                <el-option
                  v-for="item in Source"
                  :key="item.id"
                  :label="item.keyinfo"
                  :value="item.valueinfo"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="pageChange(1)">查询</el-button>
              <el-button v-if="edit" type="primary" @click="onAdd">添加</el-button>
              <el-button v-if="edit" type="primary" @click="onFile">导入</el-button>
              <!-- <el-button type="primary" @click="onSubmit">提交</el-button> -->
              <el-button v-if="edit" type="primary" @click="onCancel">取消提交</el-button>
              <el-button type="primary" @click="onApprovalRecord">审批记录</el-button>
              <el-button v-if="edit" type="primary" @click="onAddTask">添加任务</el-button>
              <el-button type="primary" @click="onTaskledger">任务台账</el-button>
              <!-- <input type="file" ref="fileRef" style="display: none"></input> -->
              <!-- <el-input type="file" ref="fileRef" style="display: none"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        border
        :height="tableHeight"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column v-if="edit" fixed="left" label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button
              @click="onDel(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.validstr == '草拟' || scope.row.validstr == '退回' ? false : true"
              >删除</el-button
            >
            <el-button
              @click="onRevise(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.validstr == '草拟' || scope.row.validstr == '退回' ? false : true"
              >修改</el-button
            >

            <el-button
              @click="onSubmit(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.validstr == '草拟' || scope.row.validstr == '退回' ? false : true"
              >提交</el-button
            >
          </template>
        </el-table-column>
        <el-table-column type="index" width="80" label="序号" align="center"> </el-table-column>
        <el-table-column prop="name" label="项目名称" min-width="250">
          <template slot-scope="scope">
            <el-link type="success" @click="onlink(scope.row)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>

        <el-table-column prop="source" label="来源" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="comper" label="平均完成率" min-width="180">
          <template slot-scope="scope">
            <el-progress class="showProgressColor" :percentage="scope.row.comper"></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="mdates" label="创建时间" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="username" label="创建人" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="validstr" label="状态" min-width="120" align="center"> </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px"
        :current-page="queryForm.pagenum"
        :page-sizes="[20, 50, 100]"
        :page-size="queryForm.pagesize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </el-card>

    <el-dialog :title="title" :visible.sync="Visible">
      <el-form :model="form">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="来源" :label-width="formLabelWidth">
          <el-input v-model="form.source" clearable placeholder="请输入来源"></el-input>

          <!-- <el-select v-model="form.source" clearable placeholder="请选择来源">
            <el-option v-for="item in Source" :key="item.id" :label="item.keyinfo" :value="item.valueinfo"></el-option>
          </el-select> -->
        </el-form-item>

        <el-form-item label="承办部门" :label-width="formLabelWidth">
          <el-input disabled placeholder="请选择部门" v-model="form.hostdpname" autocomplete="off">
            <el-button slot="append" icon="el-icon-zoom-in" @click="Clickcurr()"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="CreateTask('Save')">保存</el-button>

        <el-button type="primary" @click="CreateTask('Task')">创建并添加任务</el-button>
      </div>
    </el-dialog>
    <renyuanbm :visiblesbm="visiblesbm" @fatherbm="visiblesbm = false" @onChoosebm="onChoosebm"></renyuanbm>
  </div>
</template>

<script>
import renyuanbm from '@/views/jichuxinxi/zuzhirenyuan/renyuandalog/renyuanbm.vue'
import { Dictionary, LocalDate, QueryPageList, Save, Del, QueryInfoByID, isCreatePro } from '@/api/Project/index'
import { GetCheckInfo } from '@/api/Approval/index'
export default {
  name: 'ProjectEstablishment2',
  data() {
    return {
      title: '',
      tableHeight: '',
      file: '',
      queryForm: {
        pagenum: 1,
        pagesize: 20
      },
      Source: [],
      total: 0,
      tableData: [],
      loading: false,
      Visible: false,
      formRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        curr: [{ required: true, message: '请输入币别', trigger: 'blur' }],
        rate: [{ type: 'number', message: '折人民币汇率必须为数字值' }],
        rate1: [{ type: 'number', message: '折美汇率必须为数字值' }]
      },
      form: {},
      time: '',
      formLabelWidth: '120px',
      handleCurrent: null,
      visiblesbm: false,
      edit: false
    }
  },
  components: { renyuanbm },

  watch: {
    '$store.getters.approveIClose': {
      immediate: true,
      handler(newId) {
        this.onSearch()
      }
    },
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/ProjectEstablishment/ProjectEstablishment2') {
          this.onSearch()
        }
      }
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 350
    this.onIsCreatePro()
    this.onSource()
    this.onSearch()
  },

  methods: {
    async onIsCreatePro() {
      const result = await isCreatePro({ userid: this.$store.getters.userInfo.id })
      this.edit = result.success
      this.edit = true
    },

    // 获取子组件穿回来的值
    onChoosebm(row) {
      this.form.hostdpname = row.orgname
      this.form.hostdpid = row.id
    },
    // 承办部门选择
    Clickcurr(row) {
      this.visiblesbm = true
    },
    // 列表选中的数据
    handleCurrentChange(val) {
      this.handleCurrent = val
    },
    // 点击页面显示条数
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    // 点击下一页与页码
    pageChange(page) {
      this.queryForm.pagenum = page
      this.onSearch()
    },
    // 查询来源-与时间
    async onSource() {
      const { content } = await Dictionary({ groupinfo: 'TaskSource' })
      this.Source = content
      const res = await LocalDate()
      this.time = res.content
    },
    // 查询数据
    async onSearch() {
      this.loading = true
      if (this.queryForm.time != undefined) {
        this.queryForm.mdates1 = this.queryForm.time[0]
        this.queryForm.mdates2 = this.queryForm.time[1]
      } else {
        this.queryForm.mdates1 = this.queryForm.time
        this.queryForm.mdates2 = this.queryForm.time
      }
      this.queryForm.loguserid = this.$store.getters.userInfo.id

      const { content } = await QueryPageList(this.queryForm)
      this.tableData = content.list
      this.total = content.total
      this.loading = false
    },
    // 点击添加
    onAdd() {
      this.title = '督办项目新增'
      this.form = {
        hostdpname: this.$store.getters.userInfo.orgname,
        hostdpid: this.$store.getters.userInfo.orgid
      }
      this.Visible = true
    },
    // 点击创建并添加任务
    async CreateTask(row) {
      if (this.form.id == undefined) {
        this.form.id = 0
        this.form.mdate = this.time
        this.form.userid = this.$store.getters.userInfo.id
        this.form.username = this.$store.getters.userInfo.username
        this.form.dpid = this.$store.getters.userInfo.orgid
        this.form.dpname = this.$store.getters.userInfo.orgname
      }
      const res = await Save(this.form)
      if (res.success == true) {
        this.$message.success(res.message)
        this.Visible = false
        if (row == 'Task') {
          this.$router.push('/Fourth/Tasklist/TasklistAdd?id=' + res.docid + '&state=A')
        }
        this.onSearch()
      } else {
        this.$message.error(res.message)
      }
    },

    async onRevise(row) {
      const { content } = await QueryInfoByID({ id: row.id })
      this.title = '督办项目修改'
      this.form = content
      this.Visible = true
    },
    // 点击导入
    onFile() {
      // console.log(this.$refs.fileRef.$el.innerHTML)
      // this.$refs.fileRef.click()
      this.$router.push('/Fourth/ProjectEstablishment/ImportDetails')
    },
    // 关闭弹框
    onClose() {
      this.form = {}
    },
    // 点击删除
    onDel(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await Del({ id: data.id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearch()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击提交
    onSubmit(row) {
      // console.log(row.name, this.handleCurrent.name)
      // console.log(row.id, this.handleCurrent.id)

      if (this.handleCurrent != null) {
        this.$confirm('确定全部任务已经创建完毕', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            const res = await this.$ApproveInsert({
              visible: true,
              title: row.name,
              documentid: row.id,
              historyid: 0,
              modelcode: 'DBProject'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            })
          })
      } else {
        this.$message({
          type: 'error',
          message: '请选择一条数据'
        })
      }
    },

    // 点击添加任务
    onAddTask() {
      if (this.handleCurrent != null) {
        this.$router.push('/Fourth/Tasklist/TasklistAdd?id=' + this.handleCurrent.id + '&state=A')
      } else {
        this.$message.error('请选择一条数据')
      }
    },
    // 点击任务台账
    onTaskledger() {
      if (this.handleCurrent != null) {
        console.log(this.handleCurrent)
        this.$router.push(
          '/Fourth/Tasklist/ImportDetailsC?id=' + this.handleCurrent.id + '&title=' + this.handleCurrent.name
        )
      } else {
        this.$message.error('请选择一条数据')
      }
    },
    // 取消提交
    async onCancel() {
      if (this.handleCurrent != null) {
        this.$confirm('确定要取消提交', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await this.$ApproveCancel({
              modelCode: 'DBProject',
              documentID: this.handleCurrent.id,
              userName: this.$store.getters.userInfo.username
            })
            this.onSearch()
          })
          .catch(error => {
            console.log(error)
            if (error == 'cancel') {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            }
          })
      } else {
        this.$message({
          type: 'error',
          message: '请选择一条数据'
        })
      }
    },
    // 审批记录
    onApprovalRecord() {
      if (this.handleCurrent != null) {
        this.$Approve({ visible: true, documentid: this.handleCurrent.id, modelcode: 'DBProject' })
      } else {
        this.$message({
          type: 'error',
          message: '请选择一条数据'
        })
      }
    },
    // 点击项目名称链接
    async onlink(row) {
      this.$router.push('/Fourth/Tasklist/ImportDetailsC?id=' + row.id + '&title=' + row.name)
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> .el-select {
  width: 100%;
}
.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}

.title {
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 5px;
  padding: 0 10px;
  display: inline-block;
  letter-spacing: 0.5px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}

.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
</style>
